<!--
 * @Description:
 * @Author: changqing
 * @Date: 2021-05-20 20:35:03
 * @LastEditTime: 2021-06-10 19:49:08
 * @LastEditors: changqing
 * @Usage:
-->
<template>
  <div>
    <h1>Dashboard page</h1>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
     <el-button v-permission="['super_admin']" type="primary">size改变</el-button>
     <el-button type="primary" icon="el-icon-search">搜索</el-button>
     <svg-icon icon-class="404" class-name="custom-class" @click="sayHi"></svg-icon>
  </div>
</template>
<script lang="ts">
import { getCurrentInstance, defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'Dashboard',
  setup() {
    // 无法使用ctx 使用proxy来代替
    // https://blog.csdn.net/qq_39115469/article/details/113817592

    const input = ref('')
    const { proxy } = getCurrentInstance()!
    const sayHi = () => {
      proxy?.$message.success('恭喜你，这是一条成功消息')
    }
    return {
      sayHi,
      input
    }
  }
})
</script>

<style lang="scss">
  .custom-class { // 自定义样式404
    font-size: 200px;
    color: green;
  }
</style>
